@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
html {
    font-size: $fontSize*1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.webWarp{
    height: 100%;
    overflow: auto;
}
.web {
    width: r(640);
   
    header {
        .top{
            border-bottom: 1px solid #dcdcdc;
        }
        .bgroud{
            width: r(640);
            height: r(300);
            background: url(../img/bgg.png) no-repeat;
            background-size: 100% 100%;overflow: hidden;
            .nav{
                width: r(583);
                height: r(38);
                margin: r(19) auto 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .return{
                    width: r(22);
                    height: r(38);
                    line-height: r(38);
                    vertical-align: middle;
                    img{
                        height:r(38) ;
                    }
                }
                .linkbtn{
                    width: r(134);
                    height: r(38);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .img{
                        height: r(27);
                        width: r(33);
                        line-height:r(27);
                        vertical-align: middle;
                        img{
                            height: r(27);
                            vertical-align: middle;
                        }
                    }
                    .img_more{
                        width: r(24);
                        height: r(6);
                        line-height: r(6);
                        vertical-align: middle;
                        img{
                            width: r(24);
                            vertical-align: middle;
                        }
                    }
                }
            }
            .h_text{
                width: r(583);
                height: r(32);
                margin: r(80) auto 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                p{
                    font-size: r(32);
                    color: #FFFFFF;
                    line-height: r(32);
                    vertical-align: middle;
                    a{
                        color: #FFFFFF;
                    }
                    img{
                        width: r(24);
                    }
                }
                img{
                    width: r(32);
                }
            }
            .t_text{
                width: r(580);
                margin: 0 auto;
                .p_num{
                    font-size: r(21);
                    color: #fff;
                    margin-top: r(16);
                }
                .look{
                    font-size: r(19);
                    color: #fff;
                    line-height: r(25);
                    vertical-align: middle;
                    margin-top: r(15);
                    img{
                        width: r(23);
                        margin-right: r(8);
                    }
                }
                .ask{
                    font-size: r(19);
                    color: #fff;
                    line-height: r(25);
                    vertical-align: middle;
                    margin-top: r(12);
                    img{
                        width: r(18);
//                      line-height: r(25);
                        vertical-align: top;
                        margin-right: r(14);
                        
                    }
                }
            }
        }
        .summary{
            width: r(580);
            margin: r(30) auto 0;
            p{
                font-size: r(20);
            }
        }
        .more{
            text-align: center;
            padding-top:r(12) ;
            padding-bottom: r(16);
            a{
                color: #363636;
                font-size:r(16) ;
                img{
                    margin-right: r(8);
                    width: r(18);
                }
            }
        }
        
    }
    .container{
        width: r(640);
        .top_pm{
            margin: 0 auto;
            width: r(580);
            height: r(25);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: r(33);
            font-size: r(20);
            .btn{
                padding: r(4) r(7);
                border: 1px solid #cdcdcd;
                border-radius: r(6);
                text-align: center;
                line-height: r(18);
                font-size: r(18);
                margin-right: r(10);
                
            }
        }
        .activity{
            margin: 0 auto;
            width: r(580);
            height: r(25);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: r(33);
            font-size: r(20);
            .btn{
                padding: r(4) r(7);
                border: 1px solid #cdcdcd;
                border-radius: r(6);
                text-align: center;
                line-height: r(18);
                font-size: r(18);
                margin-right: r(10);
                
            }
        }
        .con_nav{
            width: r(640);
            ul{
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-top: r(53);
                li{
                    width: 50%;
                   display: flex;
                   align-items: center;
                   position: relative;
                   justify-content: center;
                   
                   a{
                       font-size: r(21);
                       color: #999;
                   }
                   .active{
                       color: #000000;
                   }
                   .active:after{
                       width: 100%;
                       content: "";
                       position: absolute;
                       left: 0;
                       bottom: - r(16);
                       height: r(2);
                       background: #000000;
                       
                   }
                   a:hover:after{
                       width: 100%;
                       content: "";
                       position: absolute;
                       left: 0;
                       bottom: - r(16);
                       height: r(2);
                       background: #000000;
                   }
                }
            }
        }
        .dynamic{
            width: r(580);
            margin:r(50) auto 0;
            .top{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .top_lf{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img{
                        width: r(60);
                    }
                    .name{
                        margin-left: r(26);
                        p{
                            font-size: r(24);
                            line-height: r(24);
                            margin-bottom: r(6);
                            color: #333;
                        }
                        span{
                            font-size: r(16);
                            padding: r(4) r(8);
                            border: 1px solid #cdcdcd;
                            border-radius: r(6);
                            color: #4c4c4c;
                        }
                    }
                }
                p{
                    font-size: r(21);
                    color: #999;
                }
            }
            .con{
                p{
                    font-size: r(21);
                    color: #333;
                    margin-top: r(35);
                }
                .img{
                    width: r(212);
                    height: r(212);
                    overflow: hidden;
                    margin-top: r(25);
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .foot{
            margin-bottom: r(52);
                .state{
                margin: r(21) auto 0;
                display: flex;
                justify-content:space-around;
                align-items: center;
                font-size: r(17);
                color: #b8b8b8;
                padding-bottom: r(24);
                border-bottom: 1px solid #e5e3de;
                .state_lf{
                    display: flex;
                    justify-content:space-between;
                    align-items: center; 
                    p{
                        line-height:r(25) ;
                        vertical-align: middle;
                        margin-right: r(33);
                        img{
                            vertical-align: middle;
                            height: r(20);
                        }
                        span{
                            margin-left: r(8);
                            vertical-align: middle;
                            color: #b8b8b8;
                        }
                    } 
                }
                .state_rg{
                    display: flex;
                    justify-content:space-between;
                    align-items: center;
                    
                    ul{
                        display: flex;
                        justify-content: space-between;
                        margin-right: r(10);
                        li{
                            width: r(10);
                            height: r(10);
                            border:1px solid #bfbfbf;
                            border-radius: 50%;
                            margin-left: r(3);
                        }
                    }
                    p{
                        line-height:r(25);
                        vertical-align: middle;
                        margin-left: r(32);
                        img{
                            vertical-align: middle;
                            height: r(24);
                        }
                        span{
                            margin-right: r(8);
                            vertical-align: middle;
                            color: #b8b8b8;
                        }
                    } 
                }
            }
            }
    }
}
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: r(640);
    height: r(80);
    .btn{
        ul{
            width: r(640);
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                width: r(640);
                height: r(80);
                display: flex;
                justify-content: center;
                align-items: center;
                a{
                    width: r(640);
                    height: r(80);
                    line-height: r(80);
                    display: block;
                    text-align: center;
                    color: #FFFFFF;
                    font-size: r(30);
                    background-color: rgba(000,000,000,.5);
                }
            }
        }
    }
}